<template>
  <button
    class="icon-button"
    :class="[sizeClass, { 'icon-button--disabled': disabled }]"
    :disabled="disabled"
    @click="$emit('click')"
  >
    <FontAwesomeIcon
      :icon="icon"
      :size="iconSize"
      :color="color"
      :spin="spin"
    />
    <span v-if="$slots.default" class="icon-button__text">
      <slot></slot>
    </span>
  </button>
</template>

<script setup lang="ts">
import { computed, type PropType } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import type { FontAwesomeSize } from "../types";

// 定义允许的 size 类型
type SizeType = "sm" | "md" | "lg";

const props = defineProps({
  icon: {
    type: Array, // 如 ['fas', 'user']
    required: true,
  },
  size: {
    type: String as PropType<SizeType>, // 保留运行时校验 + 类型断言​
    default: "md", // sm / md / lg
    validator: (val: string) => ["sm", "md", "lg"].includes(val),
  },
  color: {
    type: String,
    default: "#333",
  },
  spin: Boolean,
  disabled: Boolean,
});

// 定义映射关系
const sizeMap: Record<string, FontAwesomeSize> = {
  sm: "sm",
  md: "lg", // 将 'md' 映射为 Font Awesome 的 'lg'
  lg: "xl",
};

const sizeClass = computed(() => `icon-button--${props.size}`);
const iconSize = computed(() => sizeMap[props.size] || undefined);
</script>

<style scoped>
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.icon-button--sm {
  font-size: 12px;
}
.icon-button--md {
  font-size: 14px;
}
.icon-button--lg {
  font-size: 16px;
}

.icon-button:hover {
  opacity: 0.8;
}

.icon-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
